<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      :title="btn.AssociatedRole"
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogVisible"
    >
      <div style="text-align: center; height: 100%">
        <el-transfer
          v-model="value"
          class="transfer"
          filterable
          :filter-placeholder="dataList.RoleName"
          :titles="[dataList.UncorrelatedRole, dataList.AssociatedRole]"
          :data="data"
          @change="operatorTransferData"
        ></el-transfer>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserRoleRelationData,
  addUserRoleRelation,
} from "../../api/Permission/PermissionUserRole.js";

export default {
  name: "PermissionRoleSelectShow",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      innerDialogVisible: false,
      data: [],
      value: [],
      userId: 0, // 用户id
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  watch: {
    dialogVisible(val) {
      this.innerDialogVisible = val;
    },
    innerDialogVisible(val) {
      this.$emit("update:dialogVisible", val);
    },
  },
  created() { },
  methods: {
    cancel() {
      this.innerDialogVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    getNoExistsAllDataList() {
      this.data = [];
      getUserRoleRelationData({ userId: this.userId, type: 2 }).then((res) => {
        if (res.code === 200 && res.data) {
          for (var index = 0; index < res.data.length; index++) {
            this.data.push({
              key: res.data[index].roleId,
              label: res.data[index].roleName,
            });
          }
        }
      });
    },
    getExistsAllDataList() {
      var self = this;
      self.value = [];
      if (self.userId > 0) {
        getUserRoleRelationData({ userId: self.userId, type: 1 }).then(
          (res) => {
            if (res.code === 200 && res.data) {
              for (var index = 0; index < res.data.length; index++) {
                self.value.push(res.data[index].roleId);
              }
            }
          }
        );
      }
    },
    operatorTransferData() {
      var formData = { userId: this.userId, roleIds: this.value };
      addUserRoleRelation(formData).then((res) => {
        if (res.code === 200) {
          // something
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.transfer {
  display: inline-block;
  text-align: left;
  height: 100%;
}
</style>
